<template>
  <div id="dbrowForm">
    <el-form label-position="right">
      <el-row>
        <el-col :span="12" class="left-form">
          <el-form-item v-for="(item, index) in constructForm.left" :key="index" v-if="item.show"
                        :label="$t(item.label) + '：'" :label-width="formLabelWidth" :prop="item.fieldname"
                        :required="item.required">
            <el-input v-if="item.type === 'input'" v-model="formValue[item.fieldname]" :required="item.required"
                      :disabled="item.disabled" size="small"></el-input>
            <el-select v-if="item.type === 'select'" v-model="formValue[item.fieldname]" :disabled="item.disabled"
                       :required="item.required" size="small" style="width: 100%;">
              <el-option v-for="optionitem in item.data" :key="optionitem.value" :label="optionitem.label"
                         :value="optionitem.value"></el-option>
            </el-select>
            <el-switch v-if="item.type === 'switch'" v-model="formValue[item.fieldname]" on-text="" off-text=""
                       :required="item.required" :disabled="item.disabled" size="small"></el-switch>
            <el-date-picker v-if="item.type === 'date-picker'" v-model="formValue[item.fieldname]"
                            :disabled="item.disabled" align="right" :required="item.required" type="date"
                            :picker-options="pickerOptions1" size="small" style="width: 100%;"></el-date-picker>
            <el-input-number v-if="item.type === 'number'" :controls="false" v-model="formValue[item.fieldname]"
                             :value="item.value" :required="item.required" :disabled="item.disabled" size="small"
                             style="width: 100%;"></el-input-number>
            <el-radio-group v-if="item.type === 'radio'" v-model="formValue[item.fieldname]" :disabled="item.disabled"
                            :required="item.required" size="small" style="width: 100%;">
              <el-radio v-for="optionitem in item.data" :key="optionitem.value" :label="optionitem.value">
                {{ $t(optionitem.label) }}
              </el-radio>
            </el-radio-group>
            <el-cascader v-if="item.type === 'cascader'" :props="item.prop" :options="item.data"
                         v-model="formValue[item.fieldname]" :disabled="item.disabled" :required="item.required"
                         size="small" style="width: 100%;" change-on-select></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="right-form">
          <el-form-item v-for="(item, index) in constructForm.right" :key="index" v-if="item.show"
                        :label="$t(item.label) + '：'" :label-width="formLabelWidth" :prop="item.fieldname"
                        :required="item.required">
            <el-input v-if="item.type === 'input'" v-model="formValue[item.fieldname]" :value="item.value"
                      :required="item.required" :disabled="item.disabled" size="small"></el-input>
            <el-select v-if="item.type === 'select'" v-model="formValue[item.fieldname]" :disabled="item.disabled"
                       :required="item.required" size="small" style="width: 100%;">
              <el-option v-for="optionitem in item.data" :key="optionitem.value" :label="optionitem.label"
                         :value="optionitem.value"></el-option>
            </el-select>
            <el-switch v-if="item.type === 'switch'" v-model="formValue[item.fieldname]" on-text="" off-text=""
                       :required="item.required" :disabled="item.disabled" size="small"></el-switch>
            <el-date-picker v-if="item.type === 'date-picker'" v-model="formValue[item.fieldname]"
                            :disabled="item.disabled" align="right" :required="item.required" type="date"
                            :picker-options="pickerOptions1" size="small" style="width: 100%;"></el-date-picker>
            <el-input-number v-if="item.type === 'number'" :controls="false" v-model="formValue[item.fieldname]"
                             :value="item.value" :required="item.required" :disabled="item.disabled" size="small"
                             style="width: 100%;"></el-input-number>
            <el-radio-group v-if="item.type === 'radio'" v-model="formValue[item.fieldname]" :disabled="item.disabled"
                            :required="item.required" size="small" style="width: 100%;">
              <el-radio v-for="optionitem in item.data" :key="optionitem.value" :label="optionitem.value">
                {{ $t(optionitem.label) }}
              </el-radio>
            </el-radio-group>
            <el-cascader v-if="item.type === 'cascader'" :props="item.prop" :options="item.data"
                         v-model="formValue[item.fieldname]" :disabled="item.disabled" :required="item.required"
                         size="small" style="width: 100%;" change-on-select></el-cascader>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
  import { getDialogFormMap, getToolBarList, getComboBoxMap } from '../../assets/js/buildStructure/list.js'

  import { postDataToServer } from '../../assets/js/post.js'
  import { getStaticMapList } from '../../assets/js/GlobeDefine.js'

  export default {
    name: 'dbrowForm',
    props: ['constructForm', 'formValue'],
    data () {
      return {
        pickerOptions1: {
          shortcuts: [{
            text: '今天',
            onClick (picker) {
              picker.$emit('pick', new Date())
            }
          }, {
            text: '昨天',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          }, {
            text: '一周前',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }]
        },
        formLabelWidth: '120px',
      }
    },
    created () {
      // this.updateEvent();
    },
    mounted () {
      this.updateEvent()
    },
    methods: {
      updateEvent () {
        this.getComboxDataList()
      },
      getComboxDataList () {
        let _this = this
        let s = new Array()
        for (s in this.constructForm) {
          this.constructForm[s].forEach((element, index) => {
            if (element.type === 'select' || element.type === 'radio') {
              let m = new Array()
              let fieldmap = getComboBoxMap(element.fieldname)

              if (fieldmap.datasource === 'local') {
                let list = getStaticMapList(fieldmap.define)
                element.data = list
              } else {
                postDataToServer(fieldmap.datasource).then((data) => {
                  let _id = fieldmap.valueField
                  let _name = fieldmap.textField
                  if (data.status === 0) {
                    let list = data.data_list
                    list.forEach((val) => {
                      m.push({
                        value: val[_id],
                        label: val[_name]
                      })
                    })
                    element.data = m
                  }
                })
              }

            } else if (element.type === 'cascader') {
              let m = new Array()
              let fieldmap = getComboBoxMap(element.fieldname)
              if (fieldmap.datasource === 'local') {
                let list = getStaticMapList(fieldmap.define)
                element.data = list
              } else {
                postDataToServer(fieldmap.datasource).then((data) => {
                  if (data.status === 0) {
                    element.data = data.data_list
                  }
                })
              }
            }
          })
        }
      }
    }
  }
</script>
<style scoped>
  * {
    font-weight: normal;
  }

  .left-form {
    padding-right: 1em;
  }

  .right-form {
    padding-left: 1em;
  }
</style>
